<template>
	<view class="page">
		<view class="module">
			<view class="title" data-title="已连接的设备"></view>
			<view class="body">
				<view class="row" v-if="bleInfo.name">
					<view class="">{{bleInfo.name}}</view>
					<view class="btn" @tap="closeBle()">断开连接</view>
				</view>
			</view>
		</view>
		<view class="module">
			<view class="title" data-title="可连接的设备"></view>
			<view class="body">
				<view class="row" v-for="(item,index) in bleDevs" :key="index" v-if="item.deviceId!==bleInfo.deviceId">
					<view class="">{{item.name}}</view>
					<view class="btn" @tap="onBind(item)">点击连接</view>
				</view>
				<view class="none" v-if="bleDevs.length===0">暂无</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Bluetooth from '@/uni_modules/ch-bluetooth/js_sdk/index.js'

	let ble = new Bluetooth();

	export default {
		data() {
			return {
				bleDevs: [],
				bleInfo: {}
			};
		},
		watch: {
			'$store.state.Bluetooth.bleInfo'() {
				this.bleInfo = this.$store.state.Bluetooth.bleInfo
			}
		},
		onLoad(options) {
			this.bleInfo = this.$store.state.Bluetooth.bleInfo
			this.bleDevs = this.$store.state.Bluetooth.bleDevs
			this.onBleConnStateChange()
			this.onBleStateChange()
			this.initBle()
		},
		onUnload() {
			this.stopSearchBle()
		},
		methods: {
			onBleConnStateChange() {
				ble.onBLEConnectionStateChange(() => {
					this.$store.commit('setBleInfo', {
						name: '',
						deviceId: '',
						serviceId: '',
						readId: '',
						writeId: '',
						notifyId: '',
						indicateId: ''
					});
				})
			},
			onBleStateChange() {
				ble.onBluetoothAdapterStateChange((res) => {
					if (!ble.isOpenBle && res.available) {
						this.initBle()
					}
				})
			},
			initBle() {
				ble.openBluetoothAdapter(() => {
					this.bleDevs = ble.deviceList
						.filter((item) => {
							return item.name != '未知设备' &&
								item.name != this.bleInfo.name &&
								item.name === item.localName
						}).sort(() => {
							return function(a, b) {
								return b['RSSI'] - a['RSSI'];
							}
						});
					this.$store.commit('setBleDevs', this.bleDevs)
				});
			},
			closeBle() {
				uni.showLoading({
					mask: true,
					title: '断开连接中'
				})
				ble.closeBLEConnection(() => {
					this.bleInfo = {
						name: '',
						deviceId: '',
						serviceId: '',
						readId: '',
						writeId: '',
						notifyId: '',
						indicateId: ''
					}
					this.$store.commit('setBleDevs', this.bleInfo)
					uni.hideLoading()
				});
			},
			stopSearchBle() {
				ble.stopBluetoothDevicesDiscovery();
			},
			onBind(item) {
				uni.showLoading({
					mask: true,
					title: '蓝牙连接中'
				})
				// 绑定蓝牙
				console.log('期望连接的蓝牙--', item);
				ble.createBLEConnection(item.deviceId, () => {
					ble.getBLEDeviceServices(async slist => {
						let usable_bdc = null;
						let usable_uuid = null;
						for (let s of slist) {
							let bdc = await ble.getBLEDeviceCharacteristics(s.uuid);
							// 找到特征值
							if (bdc.writeId) {
								usable_bdc = bdc
								usable_uuid = s.uuid
								break;
							}
						}
						if (usable_bdc) {
							uni.hideLoading()
							let bleInfo = {
								name: item.name,
								deviceId: item.deviceId,
								serviceId: usable_uuid,
								readId: usable_bdc.readId,
								writeId: usable_bdc.writeId,
								notifyId: usable_bdc.notifyId,
								indicateId: usable_bdc.indicateId
							};
							console.log('设备连接成功', bleInfo)
							this.$store.commit('setBleInfo', bleInfo);
							this.stopSearchBle()
						} else {
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content: '找不到该读写的特征值',
							})
						}
					});
				});
			},
			stopSearchBle() {
				ble.stopBluetoothDevicesDiscovery()
			}
		},
	}
</script>

<style lang="scss">
	.module {
		margin: 15px 30rpx;
		border: 1px solid #c8c7cc;
		background-color: #FFFFFF;
		border-radius: 4px;

		.title {
			padding: 10px 30rpx;
			background-color: #f7f7f7;

			&::after {
				content: attr(data-title);
			}
		}

		.body {
			padding: 15px 30rpx;

			.row {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;

				.btn {
					color: #23B668;
				}
			}

			.none {
				color: #808080;
				font-size: 13px;
			}
		}
	}
</style>
